<template>
  <!-- 添加/编辑用户 -->
  <a-modal :width="700" v-model:visible="showEditUserDialog" :title="currentUser.id ? '编辑成员' : '添加成员'" title-align="start" :mask-closable="false" :on-before-ok="submitUser" :ok-loading="submitLoading" @cancel="closedEditUser">
    <a-form style="width: 500px" ref="userFormRef" :model="currentUser" :rules="rulesUser">
      <a-form-item label="用户名" v-if="currentUser.id">
        <p style="width: 100%">{{ currentUser.loginName }}</p>
        <a-button style="margin-left: 10px" type="text" @click="showSetPsdDialog = true">重置密码</a-button>
      </a-form-item>
      <a-form-item field="userName" label="姓名">
        <a-input v-model.trim="currentUser.userName" placeholder="请输入员工姓名" allow-clear />
      </a-form-item>
      <a-form-item field="sex" label="性别">
        <a-radio-group v-model="currentUser.sex">
          <a-radio value="男">男</a-radio>
          <a-radio value="女">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="deptId" label="部门">
        <a-cascader v-model="currentUser.deptId" :options="(deptList as Array<any>)" placeholder="选择部门" allow-search :field-names="{ value: 'id', label: 'deptName' }" check-strictly />
      </a-form-item>
      <a-form-item field="employeeNumber" label="工号" v-if="currentUser.id">
        <a-input v-model="currentUser.employeeNumber" placeholder="请输入工号" allow-clear />
      </a-form-item>
      <a-form-item field="position" label="岗位">
        <a-select v-model="currentUser.position" placeholder="选择岗位" allow-search allow-clear>
          <a-option v-for="(position, i) in positionList" :key="i" :value="position.position" :label="position.position" />
        </a-select>
        <a-button style="margin-left: 10px" type="text" @click="showSetPositionDialog = true">设置岗位</a-button>
      </a-form-item>
      <a-form-item field="enrollmentDate" label="入职日期">
        <a-date-picker v-model="currentUser.enrollmentDate" placeholder="年/月/日" style="width: 100%" />
      </a-form-item>
      <a-form-item field="loginName" label="用户名" v-if="!currentUser.id">
        <a-input v-model.trim="currentUser.loginName" placeholder="请输入登录名" allow-clear />
      </a-form-item>
      <a-form-item field="mobile" label="手机号">
        <a-input v-model="currentUser.mobile" placeholder="请输入手机号" allow-clear />
      </a-form-item>
      <a-form-item field="loginPwd" label="初始密码" v-if="!currentUser.id">
        <a-input v-model="currentUser.loginPwd" placeholder="初始密码最少6位数字母+数字" allow-clear />
      </a-form-item>
      <a-form-item field="roleIds" label="角色">
        <a-select v-model="currentUser.roleIds" placeholder="请选择角色" allow-clear multiple>
          <a-option v-for="(role, i) in (roleList as any)" :key="i" :value="role.id" :label="role.roleName" />
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 设置岗位 -->
  <SetPosition v-if="showSetPositionDialog" :isShow="showSetPositionDialog" :list="positionList" @closed="closedPosition" />
  <!-- 设置密码 -->
  <SetPsd v-if="showSetPsdDialog" :isShow="showSetPsdDialog" :user="currentUser" @closed="showSetPsdDialog = false" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { updateUser, createUser, listPosition } from '@/api/system'
  import SetPosition from './setPosition.vue'
  import SetPsd from './setPsd.vue'
  import { Message } from '@arco-design/web-vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currenData: {
      type: Object,
      default: () => {},
    },
    roleList: {
      type: Array,
      default: () => [],
    },
    deptList: {
      type: Array,
      default: () => [],
    },
  })
  const userFormRef = ref()
  const showEditUserDialog = ref(props.isShow)
  const currentUser = ref<any>(props.currenData)
  const submitLoading = ref(false)
  const showSetPositionDialog = ref(false)
  const showSetPsdDialog = ref(false)

  const loginPwdvalidator = (val: any, callback: any) => {
    if (!val) {
      callback('请填写密码')
    } else if (!val.replace(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/g, '')) {
      callback()
    } else {
      callback('密码格式要求，6位以上包含字母和数字')
    }
  }
  const rulesUser = ref({
    userName: [{ required: true, message: '请输入员工姓名' }],
    sex: [{ required: true, message: '请选择性别' }],
    deptId: [{ required: true, message: '请选择部门' }],
    loginName: [{ required: true, message: '请输入用户名' }],
    mobile: [{ required: true, message: '请输入手机号' }],
    loginPwd: [{ required: true, validator: loginPwdvalidator }],
  })

  const positionList = ref<Array<any>>([])
  // 查询岗位列表
  async function getListPosition() {
    const res: any = await listPosition()
    positionList.value = res?.data || []
  }
  getListPosition()

  // 关闭编辑成员弹窗
  function closedEditUser() {
    currentUser.value = {}
    userFormRef.value.clearValidate()
    showEditUserDialog.value = false
    emit('closed')
  }
  // 提交成员信息
  async function submitUser() {
    let valid = await userFormRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    let res: any
    if (currentUser.value.id) {
      res = await updateUser(currentUser.value)
    } else {
      res = await createUser(currentUser.value)
    }
    if (!res) return false
    Message.success('保存成功')
    emit('success', currentUser.value.id ? 'edit' : 'add')
    return true
  }
  function closedPosition() {
    showSetPositionDialog.value = false
    getListPosition()
  }
</script>
